<template>
  <div class="account_item">
    <div class="title_container">
      <i :class="iconClass" />
      <div>
        <span class="title">{{ title }}</span>
        <span class="subtitle">{{ subTitle }}</span>
      </div>
    </div>
    <el-button type="text" @click="$emit('btnClickHandle', itemId)">{{ btnText }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'AccountConfigItem',
  props: {
    itemId: {
      type: String,
      default: ''
    },
    iconClass: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
.account_item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-block-end: 1px solid #ededed;

  .title_container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      font-size: 20px;
      color: #0066e5;
      margin-right: 10px;
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .subtitle {
        color: #ccc;
        font-size: 14px;
      }
    }
  }

  .el-button {
    font-size: 14px;
  }
}
</style>
